import { useEffect } from 'react';
import { Form, Input, Button, Select, DatePicker } from 'antd';
import AntdWrapper from '@/components/AntdWrapper';
import Iconfont from '@/components/IconFont';
import { customTrimFunc } from '@/utils/utils.jsx';

const { Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm:ss';

const PeriodSearch = ({ type, handleSearch }) => {
  const [form] = Form.useForm();

  useEffect(()=>{
    if(type){
      form.resetFields();
    }
  },[type])

  // 点击查询按钮
  const onFinish = (val) => {
    handleSearch(customTrimFunc(val));
  };

  // 点击重置
  const onReset = () => {
    form.resetFields();
    handleSearch()
  };

  return (
    <Form
      layout="horizontal"
      form={form}
      name="statement-period-search"
      className="new-search-form-style"
      style={{ marginBottom: '4px' }}
      onFinish={onFinish}
      initialValues={{
        timeType: '1',
      }}
    >
       <div className="flex">
        <AntdWrapper style={{ width: 420 }} label={
          <Form.Item name="timeType" style={{ marginRight: 0 }}>
            <Select style={{ width: 80 }}>
              <Option value="1">支付时间</Option>
              {type != 1 && <Option value="2">入账时间</Option>}
            </Select>
          </Form.Item>
        }>
          <Form.Item name="time">
            <RangePicker
              format={dateFormat}
              showTime
              style={{ width: '100%' }}
            />
          </Form.Item>
        </AntdWrapper>
      </div>

      <AntdWrapper  label="关联单号">
        <Form.Item label="" name="orderSn" style={{ marginRight: '32px' }}>
          <Input placeholder="请输入关联单号" />
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="支付类型">
        <Form.Item label="" name="billType">
          <Select placeholder="全部" allowClear>
            <Option value="0">门店拿货</Option>
            <Option value="1">退货退款</Option>
            <Option value="2">直发订单</Option>
            <Option value="3">采购订单</Option>
            <Option value="4">优惠金额</Option>
          </Select>
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="商品名称">
        <Form.Item label="" name="goodsName" style={{ marginRight: '32px' }}>
          <Input placeholder="请输入商品名称" />
        </Form.Item>
      </AntdWrapper>

      <AntdWrapper label="商品编码">
        <Form.Item label="" name="goodsCode" style={{ marginRight: '32px' }}>
          <Input placeholder="请输入商品编码" />
        </Form.Item>
      </AntdWrapper>
     
      <Form.Item>
        <Button
          type="primary"
          htmlType="submit"
          style={{ marginRight: '12px' }}
          shape='round'
          size='default'
          icon={<Iconfont type="iconsousuo" />}
        >
          查询
        </Button>
        <Button onClick={onReset}  shape='round' size='default'>重置</Button>
      </Form.Item>
    </Form>
  );
};

export default PeriodSearch;
